<template>
  <div class="leftSide">

    <!-- <h2 class="headT">党建管理</h2>
    <el-menu router :default-active="$route.path" class="el-menu-vertical-demo"
      @open="handleOpen" @close="handleClose" >
    <router-link to='/task_plan'>
      <el-menu-item index="1">
          <i class="el-icon-location"></i>
          <span slot="title">工作行事历</span>
      </el-menu-item>
      </router-link>
    <router-link to='/jobDescription'>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">履职说明书</span>
      </el-menu-item>
      </router-link>
      
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <span slot="title">述职评议</span>
      </el-menu-item>

    </el-menu> -->


    <el-tree :data="menusData" :props="defaultProps" @node-click="handleNodeClick" 
      node-key="id" :default-expanded-keys="[8]" :default-checked-keys="[22]"
    ></el-tree>


  </div>
</template>



<script>

import Menus from './modal.js'
import {getTabsByUser} from '../../tool/config'
import {getParams} from '../../tool/tool'
  export default {
    data() {
      return {
        menusData:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        token:'',
        catalogId:''
      };
    },
    mounted(){
      
    },

    created(){
      //初始化菜单 存入token
      this.token = getParams('smkToken');
      this.catalogId = getParams('smkCatalogId');
      localStorage['token'] = this.token;

      this.loadMenus();
    },

    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },


      //加载菜单
      loadMenus(){
        // this.menusData = this.packageMenus(Menus.tabList2.response)
        let self = this;
        getTabsByUser({catalogId:this.catalogId}).then((res)=>{
        // console.log(res)
        if(res.code == 0){
            self.menusData = self.packageMenus(res.response);
        }
      }).catch((err)=>{console.log(err)})
        
      },
      //菜单组装
      packageMenus(dataList){
        let oArr = dataList;
        let length = oArr.length;
        let fMList = []; //最终的数组
        for(let k = 0 ; k < length ; k++){
          if(oArr[k].hasChild === 'Y'){
            oArr[k].children = [];
          }
        };
        for(let i = 0 ; i < length ; i++){
          for(let j = 0 ; j < length ; j++){
            if(oArr[i].parentId === oArr[j].id){
              oArr[j].children.push(oArr[i])
              break;
            }else if(j === length - 1 ){
              fMList.push(oArr[i])
            }
          }
        }
        return fMList
      },
     
      //点击菜单
      handleNodeClick(data) {
        console.log(data)
        //排除一级菜单
        if(data.doInvoke != 's'){
        this.$router.push({path:data.doInvoke})
        }
      }
    }
  }
</script>





<style >
  .leftSide{
    float: left;
    width: 225px;
    height: 100%;
    background: #fff;
    text-align: center
    /* border: 1px solid #FF5656 */
  }
  .leftSide .el-menu{
    border-right:none
  }
  .headT{
    text-align: center;
    font-size: 18px;
    color: #FF5656;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .el-tree-node__content{
    height: 42px!important;
  }
  .el-tree-node.is-current.is-focusable{
    border-right: 2px solid #108ee9;
    background: #ecf6fd;
  }
</style>